<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局组件</title>

</head>
<body>


<div id="app">
    姑娘当前：{{age}}<br/>
    <!--父向子传一套-->
    <heima60 @add="add" @change="cg"></heima60>

</div>


<script src="../node_modules/vue/dist/vue.js"></script>
<script>

    //局部组件在注册为组件之前，并不知道自己是组件

    let heima60 = {
        template: `<div>
           <button @click="add">点我姑娘长大</button>
           <button @click="changeAge(28)">点我变成28</button>
        </div>`,
        methods:{
            add(){//increment
                this.$emit("add");//通过$emit调用父传给子的方法
            },
            changeAge(age){
                this.$emit("change",age);
            }
        }

    };

    let app = new Vue({
        el: "#app",
        components: {
            heima60
        },
        data:{
            age:18
        },
        methods:{
            add(){//父
                this.age++
            },
            cg(age){
                this.age = age;
            }
        }
    });
</script>
</body>
</html>